<template>
  <div class="list-container">
    <!-- 父页面 -->
    <div v-if="$route.path==='/home/goods'">
      <!-- 搜索框和添加按钮 -->
      <el-row :gutter="20">
        <!-- 搜索框 -->
        <el-col :span="7">
          <el-input clearable @change="getGoods" v-model.trim="queryInfo.query" placeholder="请输入要搜索的商品">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <!-- 按钮 -->
        <el-col :span="6">
          <el-button @click="addGood" type="primary">添加商品</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table max-height="450px" border stripe :data="goods_list">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="goods_name" width="500px" label="商品名称"></el-table-column>
        <el-table-column prop="goods_price" label="商品价格"></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
        <el-table-column min-width="170px" label="创建时间">
          <template slot-scope="scope">
            {{scope.row.add_time | formatDate}}
          </template>
        </el-table-column>
        <el-table-column min-width="180px" label="操作">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" type="primary" @click="showEditVisible(scope.row)" size="mini">编辑</el-button>
            <el-button @click="deleteGoods(scope.row)" icon="el-icon-delete" type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="goods_total">
      </el-pagination>
    </div>
    <!-- 子页面 -->
    <router-view v-else></router-view>
  </div>

</template>

<script>
export default {
  name: 'list',
  data() {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      goods_list: [],
      goods_total: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getGoods()
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getGoods()
    },
    async getGoods() {
      const { data: res } = await this.$api.goods.getGoodsApi(this.queryInfo)
      if (res.meta.status !== 200) return this.$message.error(this.meta.msg)
      // 格式化时间
      // res.data.goods.forEach((item, idx) => {
      //   item.add_time = this.$options.filters.formatDate(item.add_time)
      // })
      this.goods_total = res.data.total
      this.goods_list = res.data.goods
    },
    async deleteGoods(row) {
      const confirm = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirm !== 'confirm') return
      const { data: res } = await this.$api.goods.deleteGoodsApi(row.goods_id)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success('删除成功')
      this.getGoods()
    },
    addGood() {
      this.$router.push('/home/goods/add')
    },
    showEditVisible(row) {
      this.$router.push({
        path: '/home/goods/put',
        query: {
          goods_id: row.goods_id
        }
      })
    }
  },
  created() {
    console.log(this.$route)
    this.getGoods()
  },
  watch: {
    $route: 'getGoods'
  }
}
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 15px;
}
</style>
